<template>
    <div class="xk_nav">
        <span :class="{'xk_zh':zhClass}" @click="changeSort(0)" >综合排序</span>
        <span :class="[{'xk_xl_hover':xlClass},{'xk_xp':!xlClass}]" @click="changeSort(1)">销量</span>
        <span :class="[{'xk_xl_hover':xpClass},{'xk_xp':!xpClass}]" @click="changeSort(2)">新品</span>
        <span :class="priceClass" @click="changeSort(sort===3?4:3)">价格</span>
        <div class="jgqj" @mouseover="priceMouseOver" @mouseout="priceMouseOut" >
            <a  :class="jiage"> {{priceFlag}} <i class="arrow-down"></i></a>
            <div :class="priceSelect"  @mouseout="priceMouseOut"  >
                <ul>
                    <li><a @click="price(0,0,'价格区间')">不限</a></li>
                    <li><a @click="price(100,9900,'￥1-99')" >￥1-99</a></li>
                    <li><a @click="price(10000,49900,'￥100-499')" >￥100-499</a>
                    </li>
                    <li><a @click="price(50000,99900,'￥500-999')" >￥500-999</a>
                    </li>
                    <li><a @click="price(100000,0,'￥1000及以上')" >￥1000及以上</a></li>
                </ul>
                <div class="price-input">
                    <form>
                        <input type="text" name="price_min" v-model="priceMin" class="price-input" placeholder="¥"> -
                        <input type="text" name="price_max" v-model="priceMax" class="price-input" placeholder="¥">
                        <a   @click.prevent="priceInput" class="btn-s siftprice">确定</a></form>
                </div>
            </div>
        </div>
        <a :class="['mfkc',{'on':priceType===2} ]" @click.prevent="changePriceType(priceType===2?0:2)"  ><font>&nbsp;</font>只看免费课程</a>
        <a  :class="['mfkc',{'on':priceType===1} ]"  @click.prevent="changePriceType(priceType===1?0:1)"  ><font>&nbsp;</font>只看付费课程</a>
    </div>
</template>

<script>
    export default {
        name:'ConditionNav',
        data:function () {
            return {
                sort:0,
                priceType:0,
                priceMin:'',
                priceMax:'',
                priceBegin:0,
                priceEnd:0,

                priceSelect:'price-select',
                jiage:'jiage',

                priceFlag:'价格区间'

            }
        },
        computed:{
            zhClass:function(){
               return  this.sort===0?true:false
            },
            xlClass:function(){
                return this.sort===1?true:false
            },
            xpClass:function(){
                return this.sort===2?true:false
            },
            priceClass:function(){
                return this.sort===3?'xk_jg1':(this.sort===4?'xk_jg2':'xk_jg')
            },
            condition:function () {
                return {
                    sort:this.sort,
                    priceBegin:this.priceBegin,
                    priceEnd:this.priceEnd,
                    priceType:this.priceType
                }
            }


        },

        methods:{
            changeSort:function (sort) {
                // console.log(sort);
                this.sort = sort
                this.$emit('changeCondition',this.condition)
            },
            priceMouseOver:function () {
                this.priceSelect='price-select on'
                this.jiage='jiage on'
            },
            priceMouseOut:function () {
                this.priceSelect='price-select'
                this.jiage='jiage'
            },
            price:function (min,max,flag) {
                this.priceBegin=min
                this.priceEnd = max
                this.priceFlag=flag

                this.$emit('changeCondition',this.condition)
            },
            priceInput:function () {
                let price_begin = parseFloat(this.priceMin)
                let price_end = parseFloat(this.priceMax)
                if(price_begin>0){
                    this.priceBegin = price_begin * 100
                    this.priceFlag = "￥"+this.priceMin+"-"
                }
                if(price_end>price_begin){
                    this.priceEnd = price_end *100
                    this.priceFlag = "￥"+this.priceMin+"-"+this.priceMax
                }
                this.$emit('changeCondition',this.condition)
            },
            changePriceType:function (type) {
                    this.priceType = type
                this.$emit('changeCondition',this.condition)
            }



        }
    }


</script>

<style>
    /*@import "../../public/skin_it/skin_youxue.css";*/

    .price-select {
        position: absolute;
        z-index: 10;
        width: 208px;
        border: 1px solid #efefef;
        background: #fff;
        box-shadow: 1px 1px 3px #ddd;
        display: none;
        top: 41px;
    }
    ul, ul li, dl, dl dt, dl dd {
        display: block;
        margin: 0;
        padding: 0;
    }
    .price-select ul li a {
        height: 38px;
        line-height: 38px;
        padding: 0 20px;
        color: #555;
        font-size: 14px;
        font-family: 'Microsoft YaHei';
    }
    .zg_uxEwm {
        position: absolute;
        width: 150px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        top: 40px;
        left: -40px;
        display: none;
    }

    .zg_uxEwm dt {
        float: left;
        width: 80px;
    }

    .zg_uxEwm dd {
        text-align: center;
        font-family: 'Microsoft Yahei';
        font-size: 14px;
        color: #666;
        padding-top: 15px;
    }

    .appXZ:hover .zg_uxEwm {
        display: block;
    }
    .jiage {
        width: 120px!important;
        height: 42px;
        display: inline-block;
        background: #f8f8f8;
        line-height: 42px;
        position: relative;
        z-index: 998;
        font-size: 16px;
        font-family: 'Microsoft Yahei';
        color: #555;
    }
    .jiage.on {
        color: #ff4a00;
        text-decoration: none;
        background: #fff;
    }
    .price-select.on {
        display: block;
    }
</style>